<template>
    <GeneralOperationForm
        :navLists="navLists"
    >
        <template #default>
            <el-form 
                ref="ruleFormRef1"
                :model="formData1" 
                :rules="rules1"
                label-width="8vw"
                status-icon
                label-position="left"
            >
                <Section :list="navLists[0]" />
                <div class="edit-form-item">
                    定义：根据《国务院关于加强农村留守儿童关爱保护工作的意见》明确的“留守儿童是指父母双方外出务工或一方外出务工另一方无监护能力、不满十六周岁的未成年人”。外出务工时间一般按跨县域连续务工6个月以上，也可以结合本地实际，确定本地留守儿童父母外出务工时间；偶尔回家探亲、休假的，不影响连续务工时间认定。父母一方外出务工，另一方因重病、重残等原困，经综合判断，难以履行监护职责的，应纳入留守儿童监测摸排范围。
                </div>
                <Section :list="navLists[1]" />
                <Section :list="navLists[2]" />
                <div class="edit-form-item">
                    <el-form-item 
                        label="姓名"
                        prop="name"
                    >
                        <el-input 
                            v-model="formData1.name" 
                            clearable
                            placeholder="请输入姓名"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="是否登记户口"
                        prop="is_hukou_registered"
                    >
                        <GeneralSelect
                            v-model="formData1.is_hukou_registered"
                            clearable
                            placeholder="请选择是否登记户口"
                            :options="GENERAL_OPTIONS_1"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="身份证号码"
                        prop="id_number"
                    >
                        <el-input 
                            v-model="formData1.id_number" 
                            clearable
                            placeholder="请输入身份证号码"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="出生日期"
                        prop="birthdate"
                    >
                        <el-date-picker
                            v-model="formData1.birthdate"
                            type="date"
                            clearable
                            disabled
                            value-format="YYYY-MM-DD"
                            :disabled-date="(time) => {
                                return time.getTime() > Date.now()
                            }"
                            placeholder="请选择出生日期"
                            style="width: 100%"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="民族"
                        prop="ethnicity"
                    >
                        <GeneralSelect
                            v-model="formData1.ethnicity"
                            clearable
                            placeholder="请选择民族"
                            :dictionary="GENERAL_REMOTE_OPTIONS[9]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="性别"
                        prop="gender"
                    >
                        <GeneralSelect
                            v-model="formData1.gender"
                            clearable
                            disabled
                            placeholder="请选择性别"
                            :dictionary="GENERAL_REMOTE_OPTIONS[8]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="户籍所在地"
                        prop="hukou_address"
                    >
                        <el-input 
                            v-model="formData1.hukou_address" 
                            clearable
                            placeholder="请输入户籍所在地"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="现居所在地"
                        prop="address"
                    >
                        <el-input 
                            v-model="formData1.address" 
                            clearable
                            placeholder="请输入现居所在地"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="户籍详细地址"
                        prop="ziduan1"
                        class="form-item-width-1"
                    >
                        <el-input 
                            v-model="formData1.ziduan1" 
                            clearable
                            placeholder="请输入户籍详细地址"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="现居详细地址"
                        prop="ziduan2"
                        class="form-item-width-1"
                    >
                        <el-input 
                            v-model="formData1.ziduan2" 
                            clearable
                            placeholder="请输入现居详细地址"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="户籍性质"
                        prop="type"
                    >
                        <GeneralSelect
                            v-model="formData1.type"
                            clearable
                            placeholder="请选择户籍性质"
                            :dictionary="GENERAL_REMOTE_OPTIONS[7]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="是否单独居住"
                        prop="shifouertongtiaoxianzijin"
                    >
                        <GeneralSelect
                            v-model="formData1.shifouertongtiaoxianzijin"
                            clearable
                            placeholder="请选择是否单独居住"
                            :options="GENERAL_OPTIONS_1"
                        />
                    </el-form-item> 
                </div>

                <Section :list="navLists[3]" />
                <div class="edit-form-item">
                    <el-form-item 
                        label="类型"
                        prop="welfare_org_name"
                    >
                        <GeneralSelect
                            v-model="formData1.welfare_org_name"
                            clearable
                            placeholder="请选择类型"
                            :dictionary="GENERAL_REMOTE_OPTIONS[6]"
                        />
                    </el-form-item>  
                    <el-form-item 
                        label="重点关注情形"
                        prop="hukou_category"
                    >
                        <GeneralSelect
                            v-model="formData1.hukou_category"
                            clearable
                            placeholder="请选择重点关注情形"
                            :dictionary="GENERAL_REMOTE_OPTIONS[10]"
                        />
                    </el-form-item>
                </div>

                <Section :list="navLists[4]" />
                <div class="edit-form-item">
                    <el-form-item 
                        label="就学情况"
                        prop="health_status"
                    >
                        <GeneralSelect
                            v-model="formData1.health_status"
                            clearable
                            placeholder="请选择就学情况"
                            :dictionary="GENERAL_REMOTE_OPTIONS[11]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="学业状况"
                        prop="disease_types"
                    >
                        <GeneralSelect
                            v-model="formData1.disease_types"
                            multiple
                            collapseTags
                            collapseTagsTooltip
                            clearable
                            placeholder="请选择学业状况"
                            :dictionary="GENERAL_REMOTE_OPTIONS[12]"

                        />
                    </el-form-item>
                    <el-form-item 
                        label="就读学校"
                        prop="ziduan3"
                    >
                        <el-input 
                            v-model="formData1.ziduan3" 
                            clearable
                            placeholder="请输入就读学校"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="是否学校寄宿"
                        prop="ziduan4"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan4"
                            clearable
                            placeholder="请选择是否学校寄宿"
                            :options="GENERAL_OPTIONS_1"
                        />
                    </el-form-item>
                </div>
                <Section :list="navLists[5]" />
                <div class="edit-form-item">
                    <el-form-item 
                        label="健康状况"
                        prop="disabled_types"
                    >
                        <GeneralSelect
                            v-model="formData1.disabled_types"
                            multiple
                            collapseTags
                            collapseTagsTooltip
                            clearable
                            placeholder="请选择健康状况"
                            :dictionary="GENERAL_REMOTE_OPTIONS[0]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="残疾类型"
                        prop="parenting_type"
                    >
                        <GeneralSelect
                            v-model="formData1.parenting_type"
                            clearable
                            placeholder="请选择残疾类型"
                            :dictionary="GENERAL_REMOTE_OPTIONS[15]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="残疾等级"
                        prop="disabled_level"
                    >
                        <GeneralSelect
                            v-model="formData1.disabled_level"
                            clearable
                            placeholder="请选择残疾等级"
                            :dictionary="GENERAL_REMOTE_OPTIONS[13]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="重病类型"
                        prop="education_or_job"
                    >
                        <GeneralSelect
                            v-model="formData1.education_or_job"
                            clearable
                            placeholder="请选择重病类型"
                            :dictionary="GENERAL_REMOTE_OPTIONS[14]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="纳入医保"
                        prop="ziduan5"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan5"
                            clearable
                            placeholder="请选择纳入医保"
                            :dictionary="GENERAL_REMOTE_OPTIONS[14]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="接受康复救助情况"
                        prop="ziduan6"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan6"
                            clearable
                            placeholder="请选择接受康复救助情况"
                            :options="GENERAL_OPTIONS_1"
                        />
                    </el-form-item>
                </div>
                <Section :list="navLists[6]" />
                <div class="edit-form-item">
                    <el-form-item 
                        label="0-6岁儿童健康管理服务"
                        prop="ziduan7"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan7"
                            clearable
                            placeholder="请选择0-6岁儿童健康管理服务"
                            :dictionary="GENERAL_REMOTE_OPTIONS[14]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="0-36个月儿童中医药健康管理服务"
                        prop="ziduan8"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan8"
                            clearable
                            placeholder="请选择0-36个月儿童中医药健康管理服务"
                            :dictionary="GENERAL_REMOTE_OPTIONS[14]"
                        />
                    </el-form-item>
                </div>
                
                <Section :list="navLists[7]" />
                <Section :list="navLists[8]" />
                <div class="edit-form-item">
                    <el-form-item 
                        label="家庭经济来源"
                        prop="ziduan9"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan9"
                            multiple
                            collapseTags
                            collapseTagsTooltip
                            clearable
                            placeholder="请选择家庭经济来源"
                            :dictionary="GENERAL_REMOTE_OPTIONS[0]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="家庭困难情况"
                        prop="ziduan10"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan10"
                            multiple
                            collapseTags
                            collapseTagsTooltip
                            clearable
                            placeholder="请选择家庭困难情况"
                            :dictionary="GENERAL_REMOTE_OPTIONS[0]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="生活保障情况"
                        prop="ziduan11"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan11"
                            multiple
                            collapseTags
                            collapseTagsTooltip
                            clearable
                            placeholder="请选择生活保障情况"
                            :dictionary="GENERAL_REMOTE_OPTIONS[0]"
                        />
                    </el-form-item>
                    
                </div>
                <Section :list="navLists[9]" />
                <div class="edit-form-item">
                    <el-form-item 
                        label="父亲现状况"
                        prop="ziduan12"
                        class="form-item-width-1"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan12"
                            clearable
                            placeholder="请选择父亲现状况"
                            :dictionary="GENERAL_REMOTE_OPTIONS[14]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="姓名"
                        prop="ziduan13"
                    >
                        <el-input 
                            v-model="formData1.ziduan13" 
                            clearable
                            placeholder="请输入姓名"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="身份证号码"
                        prop="ziduan14"
                    >
                        <el-input 
                            v-model="formData1.ziduan14" 
                            clearable
                            placeholder="请输入身份证号码"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="出生日期"
                        prop="ziduan15"
                    >
                        <el-date-picker
                            v-model="formData1.ziduan15"
                            type="date"
                            clearable
                            value-format="YYYY-MM-DD"
                            :disabled-date="(time) => {
                                return time.getTime() > Date.now()
                            }"
                            placeholder="请选择出生日期"
                            style="width: 100%"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="联系电话"
                        prop="ziduan16"
                    >
                        <el-input 
                            v-model="formData1.ziduan16" 
                            clearable
                            placeholder="请输入联系电话"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="是否在国内"
                        prop="ziduan17"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan17"
                            clearable
                            placeholder="请选择是否在国内"
                            :dictionary="GENERAL_REMOTE_OPTIONS[9]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="务工行政区划"
                        prop="ziduan18"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan18"
                            clearable
                            placeholder="请选择务工行政区划"
                            :dictionary="GENERAL_REMOTE_OPTIONS[9]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="务工详细地址"
                        prop="ziduan19"
                        class="form-item-width-1"
                    >
                        <el-input 
                            v-model="formData1.ziduan19" 
                            clearable
                            placeholder="请输入务工详细地址"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="外出务工时间"
                        prop="ziduan20"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan20"
                            clearable
                            placeholder="请选择外出务工时间"
                            :dictionary="GENERAL_REMOTE_OPTIONS[9]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="户籍地址"
                        prop="ziduan21"
                        class="form-item-width-1"
                    >
                        <el-input 
                            v-model="formData1.ziduan21" 
                            clearable
                            placeholder="请输入户籍地址"
                        />
                    </el-form-item>

                    <el-form-item 
                        label="母亲现状况"
                        prop="ziduan22"
                        class="form-item-width-1"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan22"
                            clearable
                            placeholder="请选择母亲现状况"
                            :dictionary="GENERAL_REMOTE_OPTIONS[14]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="姓名"
                        prop="ziduan23"
                    >
                        <el-input 
                            v-model="formData1.ziduan23" 
                            clearable
                            placeholder="请输入姓名"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="身份证号码"
                        prop="ziduan24"
                    >
                        <el-input 
                            v-model="formData1.ziduan24" 
                            clearable
                            placeholder="请输入身份证号码"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="出生日期"
                        prop="ziduan25"
                    >
                        <el-date-picker
                            v-model="formData1.ziduan25"
                            type="date"
                            clearable
                            value-format="YYYY-MM-DD"
                            :disabled-date="(time) => {
                                return time.getTime() > Date.now()
                            }"
                            placeholder="请选择出生日期"
                            style="width: 100%"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="联系电话"
                        prop="ziduan26"
                    >
                        <el-input 
                            v-model="formData1.ziduan26" 
                            clearable
                            placeholder="请输入联系电话"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="是否在国内"
                        prop="ziduan27"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan27"
                            clearable
                            placeholder="请选择是否在国内"
                            :dictionary="GENERAL_REMOTE_OPTIONS[9]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="务工行政区划"
                        prop="ziduan28"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan28"
                            clearable
                            placeholder="请选择务工行政区划"
                            :dictionary="GENERAL_REMOTE_OPTIONS[9]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="务工详细地址"
                        prop="ziduan29"
                        class="form-item-width-1"
                    >
                        <el-input 
                            v-model="formData1.ziduan29" 
                            clearable
                            placeholder="请输入务工详细地址"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="外出务工时间"
                        prop="ziduan30"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan30"
                            clearable
                            placeholder="请选择外出务工时间"
                            :dictionary="GENERAL_REMOTE_OPTIONS[9]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="户籍地址"
                        prop="ziduan31"
                        class="form-item-width-1"
                    >
                        <el-input 
                            v-model="formData1.ziduan31" 
                            clearable
                            placeholder="请输入户籍地址"
                        />
                    </el-form-item>
                </div>
                <Section :list="navLists[10]" />
                <div class="edit-form-item">
                    <el-form-item 
                        label="祖父现状况"
                        prop="ziduan32"
                        class="form-item-width-1"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan32"
                            clearable
                            placeholder="请选择祖父现状况"
                            :dictionary="GENERAL_REMOTE_OPTIONS[14]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="姓名"
                        prop="ziduan33"
                    >
                        <el-input 
                            v-model="formData1.ziduan33" 
                            clearable
                            placeholder="请输入姓名"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="出生日期"
                        prop="ziduan34"
                    >
                        <el-date-picker
                            v-model="formData1.ziduan34"
                            type="date"
                            clearable
                            value-format="YYYY-MM-DD"
                            :disabled-date="(time) => {
                                return time.getTime() > Date.now()
                            }"
                            placeholder="请选择出生日期"
                            style="width: 100%"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="祖母现状况"
                        prop="ziduan35"
                        class="form-item-width-1"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan35"
                            clearable
                            placeholder="请选择祖父现状况"
                            :dictionary="GENERAL_REMOTE_OPTIONS[14]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="姓名"
                        prop="ziduan36"
                    >
                        <el-input 
                            v-model="formData1.ziduan36" 
                            clearable
                            placeholder="请输入姓名"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="出生日期"
                        prop="ziduan37"
                    >
                        <el-date-picker
                            v-model="formData1.ziduan37"
                            type="date"
                            clearable
                            value-format="YYYY-MM-DD"
                            :disabled-date="(time) => {
                                return time.getTime() > Date.now()
                            }"
                            placeholder="请选择出生日期"
                            style="width: 100%"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="外祖父现状况"
                        prop="ziduan38"
                        class="form-item-width-1"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan38"
                            clearable
                            placeholder="请选择祖父现状况"
                            :dictionary="GENERAL_REMOTE_OPTIONS[14]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="姓名"
                        prop="ziduan39"
                    >
                        <el-input 
                            v-model="formData1.ziduan39" 
                            clearable
                            placeholder="请输入姓名"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="出生日期"
                        prop="ziduan40"
                    >
                        <el-date-picker
                            v-model="formData1.ziduan40"
                            type="date"
                            clearable
                            value-format="YYYY-MM-DD"
                            :disabled-date="(time) => {
                                return time.getTime() > Date.now()
                            }"
                            placeholder="请选择出生日期"
                            style="width: 100%"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="外祖母现状况"
                        prop="ziduan41"
                        class="form-item-width-1"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan41"
                            clearable
                            placeholder="请选择祖父现状况"
                            :dictionary="GENERAL_REMOTE_OPTIONS[14]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="姓名"
                        prop="ziduan42"
                    >
                        <el-input 
                            v-model="formData1.ziduan42" 
                            clearable
                            placeholder="请输入姓名"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="出生日期"
                        prop="ziduan43"
                    >
                        <el-date-picker
                            v-model="formData1.ziduan43"
                            type="date"
                            clearable
                            value-format="YYYY-MM-DD"
                            :disabled-date="(time) => {
                                return time.getTime() > Date.now()
                            }"
                            placeholder="请选择出生日期"
                            style="width: 100%"
                        />
                    </el-form-item>
                </div>
                <Section :list="navLists[11]" />
                <Section :list="navLists[12]" />
                <div class="edit-form-item">
                    <el-form-item 
                        label="有无被委托照护人"
                        prop="ziduan53"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan53"
                            clearable
                            disabled
                            placeholder="请选择有无被委托照护人"
                            :dictionary="GENERAL_REMOTE_OPTIONS[8]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="监护能力评估"
                        prop="ziduan54"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan54"
                            clearable
                            disabled
                            placeholder="请选择监护能力评估"
                            :dictionary="GENERAL_REMOTE_OPTIONS[8]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="监护情况一般或较差的情形"
                        prop="ziduan55"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan55"
                            clearable
                            disabled
                            placeholder="请选择监护情况一般或较差的情形"
                            :dictionary="GENERAL_REMOTE_OPTIONS[8]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="姓名"
                        prop="ziduan44"
                    >
                        <el-input 
                            v-model="formData1.ziduan44" 
                            clearable
                            placeholder="请输入姓名"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="身份证号码"
                        prop="ziduan45"
                    >
                        <el-input 
                            v-model="formData1.ziduan45" 
                            clearable
                            placeholder="请输入身份证号码"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="性别"
                        prop="ziduan46"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan46"
                            clearable
                            disabled
                            placeholder="请选择性别"
                            :dictionary="GENERAL_REMOTE_OPTIONS[8]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="与儿童关系"
                        prop="ziduan47"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan47"
                            clearable
                            placeholder="请选择与儿童关系"
                            :dictionary="GENERAL_REMOTE_OPTIONS[9]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="工作单位或家庭住址"
                        prop="ziduan48"
                        class="form-item-width-1"
                    >
                        <el-input 
                            v-model="formData1.ziduan48" 
                            clearable
                            placeholder="请输入工作单位或家庭住址"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="户籍地址"
                        prop="ziduan49"
                        class="form-item-width-1"
                    >
                        <el-input 
                            v-model="formData1.ziduan49" 
                            clearable
                            placeholder="请输入户籍地址"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="联系方式"
                        prop="ziduan50"
                    >
                        <el-input 
                            v-model="formData1.ziduan50" 
                            clearable
                            placeholder="请输入联系方式"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="委托照护期限"
                        prop="ziduan51"
                    >
                        <GeneralSelect
                            v-model="formData1.ziduan51"
                            clearable
                            placeholder="请选择委托照护期限"
                            :dictionary="GENERAL_REMOTE_OPTIONS[7]"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="监督人"
                        prop="ziduan52"
                    >
                        <el-input 
                            v-model="formData1.ziduan52" 
                            clearable
                            placeholder="请输入监督人"
                        />
                    </el-form-item>
                </div>
                <Section :list="navLists[13]" />
                <div class="edit-form-item">
                    <el-form-item 
                        v-for="(item, index) in formData1.attachments"
                        :key="`attachments-${index}`"
                        label-width="0"
                        prop="attachments"
                    >
                        <FormUploadImage 
                            v-model:imageStr="item.attachmentName"
                            :title="item.attachmentTitle"
                        />
                    </el-form-item>
                </div>
            </el-form>
        </template>
        <template #footer>
            <el-button 
                type="primary"
                @click="onSubmit1(ruleFormRef1)"
            >
                保存
            </el-button>
        </template>
    </GeneralOperationForm>
</template>
  
<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import { ElMessage } from 'element-plus'
    import {
        Lock,
        User,
        Monitor,
        Phone,
        UploadFilled
    } from '@element-plus/icons-vue'
    import { 
        welfareorgsGetWelfareOrgsInfoApi, 
        welfareorgsAddChildInfoApi, 
    } from '@/apis'
    import { GENERAL_REMOTE_OPTIONS } from '@/constants'

    import { isPhone, isIDCard, dateFormatter, getGenderIsMan, getBirthDate } from '@/utils'
    import GeneralOperationForm from '@/components/generalOperationForm/GeneralOperationForm.vue'
    import Section from '@/components/section/Section.vue'
    import AdministrativeDivisionsCascader from '@/components/administrativeDivisionsCascader/AdministrativeDivisionsCascader.vue'
    import FormUploadImage from '@/components/formUploadImage/FormUploadImage.vue'
    import GeneralSelect from '@/components/generalSelect/GeneralSelect.vue'

    import { GENERAL_OPTIONS_1, } from '@/constants'

    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    
    const dialogObj = defineModel<any>('dialogObj', {
        required: false,
        default: {}
    })
    const emits = defineEmits<{
        // (e: 'update:isCollapse', data: boolean): void,
        tabelSearch: [data?: any]
    }>()
    // 侧边栏
    const navLists:Ref<any[]> = ref([
        {
            text: '留守儿童定义',
            id: 'nav-id-1',
            level: 1,
        },
        {
            text: '儿童基本信息',
            id: 'nav-id-2',
            level: 1,
        },
        {
            text: '基本信息',
            id: 'nav-id-2-1',
            level: 2,
        },
        {
            text: '儿童类型',
            id: 'nav-id-2-2',
            level: 2,
        },
        {
            text: '就学情况',
            id: 'nav-id-2-3',
            level: 2,
        },
        {
            text: '健康情况',
            id: 'nav-id-2-4',
            level: 2,
        },
        {
            text: '免费接受基本公共卫生服务',
            id: 'nav-id-2-5',
            level: 2,
        },
        {
            text: '家庭及家庭成员情况',
            id: 'nav-id-3',
            level: 1,
        },
        {
            text: '家庭情况',
            id: 'nav-id-3-1',
            level: 2,
        },
        {
            text: '儿童父母信息',
            id: 'nav-id-3-2',
            level: 2,
        },
        {
            text: '祖父母、外祖父母信息',
            id: 'nav-id-3-3',
            level: 2,
        },
        {
            text: '实际委托状况',
            id: 'nav-id-4',
            level: 1,
        },
        {
            text: '实际委托状况',
            id: 'nav-id-4-1',
            level: 2,
        },
        {
            text: '儿童照片',
            id: 'nav-id-5',
            level: 1,
        }
    ])

    const ruleFormRef1 = ref<any>()
    const formData1: Ref<any> = ref({
        name: '',
        is_hukou_registered: '',
        id_number: '',
        birthdate: '',
        ethnicity: '',
        gender: '',
        hukou_address: '',
        address: '',
        ziduan1: '',
        ziduan2: '',
        type: '',
        shifouertongtiaoxianzijin: '',
        welfare_org_name: '',
        hukou_category: '',
        health_status: '',
        disease_types: '',
        ziduan3: '',
        ziduan4: '',
        disabled_types: '',
        parenting_type: '',
        disabled_level: '',
        education_or_job: '',
        ziduan5: '',
        ziduan6: '',
        ziduan7: '',
        ziduan8: '',
        ziduan9: '',
        ziduan10: '',
        ziduan11: '',
        ziduan12: '',
        ziduan13: '',
        ziduan14: '',
        ziduan15: '',
        ziduan16: '',
        ziduan17: '',
        ziduan18: '',
        ziduan19: '',
        ziduan20: '',
        ziduan21: '',
        ziduan22: '',
        ziduan23: '',
        ziduan24: '',
        ziduan25: '',
        ziduan26: '',
        ziduan27: '',
        ziduan28: '',
        ziduan29: '',
        ziduan30: '',
        ziduan31: '',
        ziduan32: '',
        ziduan33: '',
        ziduan34: '',
        ziduan35: '',
        ziduan36: '',
        ziduan37: '',
        ziduan38: '',
        ziduan39: '',
        ziduan40: '',
        ziduan41: '',
        ziduan42: '',
        ziduan43: '',
        ziduan44: '',
        ziduan45: '',
        ziduan46: '',
        ziduan47: '',
        ziduan48: '',
        ziduan49: '',
        ziduan50: '',
        ziduan51: '',
        ziduan52: '',
        ziduan53: '',
        ziduan54: '',
        ziduan55: '',


        
        attachments: [
            {
                attachmentName: '', //附件地址名称（多个中间用，分割）	
                attachmentTitle: '儿童照片', //附件名称 （例如：身份证正面、身份证反面、学位证书、毕业证书、机构附件）
                entitySubType: '', //附件子类型枚举
                entitySubTypeName: '', //附件子类型名称
                id: '',
            }
        ], //https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg,https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg
        
        created_at: '', //新增时间
        updated_at: '', //修改时间
    })
    const rules1 = reactive<any>({
        name: [
            { 
                required: true, 
                message: '请输入姓名！', 
                trigger: 'blur' 
            },
        ],
        is_hukou_registered: [
            { 
                required: true, 
                message: '请选择是否登记户口！', 
                trigger: 'blur' 
            },
        ],
        id_number: [
            { 
                validator: (rule: any, value: any, callback: any) => {
                    if (value) {
                        if (isIDCard(value)) {
                            formData1.value.birthdate = getBirthDate(value)
                            formData1.value.gender = getGenderIsMan(value) ? '1' : '0'
                            callback()
                        } else {
                            callback(new Error('请输入正确的身份证号码'))
                        }
                    } else {
                        callback()
                    }
                }, 
                trigger: 'blur' 
            }
        ],
        ethnicity: [
            { 
                required: true, 
                message: '请选择民族！', 
                trigger: 'blur' 
            },
        ],
        hukou_address: [
            { 
                required: true, 
                message: '请输入户籍所在地！', 
                trigger: 'blur' 
            },
        ],
        address: [
            { 
                required: true, 
                message: '请输入现居所在地！', 
                trigger: 'blur' 
            },
        ],
        ziduan1: [
            { 
                required: true, 
                message: '请输入户籍详细地址！', 
                trigger: 'blur' 
            },
        ],
        ziduan2: [
            { 
                required: true, 
                message: '请输入现居详细地址！', 
                trigger: 'blur' 
            },
        ],
        type: [
            { 
                required: true, 
                message: '请选择户籍性质！', 
                trigger: 'blur' 
            },
        ],
        shifouertongtiaoxianzijin: [
            { 
                required: true, 
                message: '请选择是否单独居住！', 
                trigger: 'blur' 
            },
        ],
        welfare_org_name: [
            { 
                required: true, 
                message: '请选择类型！', 
                trigger: 'blur' 
            },
        ],
        hukou_category: [
            { 
                required: true, 
                message: '请选择重点关注情形！', 
                trigger: 'blur' 
            },
        ],
        health_status: [
            { 
                required: true, 
                message: '请选择就学情况！', 
                trigger: 'blur' 
            },
        ],
        ziduan4: [
            { 
                required: true, 
                message: '请选择是否学校寄宿！', 
                trigger: 'blur' 
            },
        ],
        disabled_types: [
            { 
                required: true, 
                message: '请选择健康状况！', 
                trigger: 'blur' 
            },
        ],
        education_or_job: [
            { 
                required: true, 
                message: '请选择重病类型！', 
                trigger: 'blur' 
            },
        ],
        ziduan5: [
            { 
                required: true, 
                message: '请选择纳入医保！', 
                trigger: 'blur' 
            },
        ],
        ziduan6: [
            { 
                required: true, 
                message: '请选择接受康复救助情况！', 
                trigger: 'blur' 
            },
        ],
        ziduan7: [
            { 
                required: true, 
                message: '请选择0-6岁儿童健康管理服务！', 
                trigger: 'blur' 
            },
        ],
        ziduan8: [
            { 
                required: true, 
                message: '请选择0-36个月儿童中医药健康管理服务！', 
                trigger: 'blur' 
            },
        ],
        ziduan9: [
            { 
                required: true, 
                message: '请选择家庭经济来源！', 
                trigger: 'blur' 
            },
        ],
        ziduan10: [
            { 
                required: true, 
                message: '请选择家庭困难情况！', 
                trigger: 'blur' 
            },
        ],
        ziduan11: [
            { 
                required: true, 
                message: '请选择生活保障情况！', 
                trigger: 'blur' 
            },
        ],
        ziduan12: [
            { 
                required: true, 
                message: '请选择父亲现状况！', 
                trigger: 'blur' 
            },
        ],
        ziduan13: [
            { 
                required: true, 
                message: '请输入父亲姓名！', 
                trigger: 'blur' 
            },
        ],
        ziduan14: [
            { 
                validator: (rule: any, value: any, callback: any) => {
                    if (value) {
                        if (isIDCard(value)) {
                            callback()
                        } else {
                            callback(new Error('请输入正确的父亲身份证号码'))
                        }
                    } else {
                        callback()
                    }
                }, 
                trigger: 'blur' 
            }
        ],
        ziduan21: [
            { 
                required: true, 
                message: '请选择母亲现状况！', 
                trigger: 'blur' 
            },
        ],
        ziduan22: [
            { 
                required: true, 
                message: '请输入母亲姓名！', 
                trigger: 'blur' 
            },
        ],
        ziduan24: [
            { 
                validator: (rule: any, value: any, callback: any) => {
                    if (value) {
                        if (isIDCard(value)) {
                            callback()
                        } else {
                            callback(new Error('请输入正确的母亲身份证号码'))
                        }
                    } else {
                        callback()
                    }
                }, 
                trigger: 'blur' 
            }
        ],
        ziduan32: [
            { 
                required: true, 
                message: '请选择祖父现状况！', 
                trigger: 'blur' 
            },
        ],
        ziduan35: [
            { 
                required: true, 
                message: '请选择祖母现状况！', 
                trigger: 'blur' 
            },
        ],
        ziduan38: [
            { 
                required: true, 
                message: '请选择外祖父现状况！', 
                trigger: 'blur' 
            },
        ],
        ziduan41: [
            { 
                required: true, 
                message: '请选择祖母现状况！', 
                trigger: 'blur' 
            },
        ],
        ziduan53: [
            { 
                required: true, 
                message: '请选择有无被委托照护人！', 
                trigger: 'blur' 
            },
        ],
        ziduan54: [
            { 
                required: true, 
                message: '请选择监护能力评估！', 
                trigger: 'blur' 
            },
        ],
        ziduan55: [
            { 
                required: true, 
                message: '请选择监护情况一般或较差的情形！', 
                trigger: 'blur' 
            },
        ],
        
        // attachments: [
        //     { 
        //         validator: (rule: any, value: any, callback: any) => {
        //             console.log(value)
        //             if (value) {
        //                 callback()
        //             } else {
        //                 callback(new Error('请上传图片！'))
        //             }
        //         }, 
        //         trigger: 'blur' 
        //     },
        // ],
    })
    onMounted(() => {
        // if (dialogObj.value?.dialogParams.id) {
            welfareorgsGetWelfareOrgsInfoApi({
                id: dialogObj.value.dialogParams?.id ? dialogObj.value.dialogParams?.id : ''
            }).then((res: any) => {
                formData1.value = res.data
            })
        // }
    })

    const onSubmit1 = (formEl: any) => {
        if (!formEl) return;
        // console.log(formData1.value)
        formEl.validate((valid, fields) => {
            // console.log(valid)
            console.log(fields)
            if (valid) {
                // console.log('submit!')
                if (dialogObj.value?.dialogParams.id) {
                    formData1.value.updated_at = dateFormatter(new Date())
                } else {
                    formData1.value.created_at = dateFormatter(new Date())
                }
                welfareorgsAddChildInfoApi({
                    ...formData1.value
                }).then(res => {
                    emits('tabelSearch')
                    dialogObj.value.dialogVisible = false
                }).catch(err => {
                    // ElMessage({
                    //     type: 'error',
                    //     message: '系统异常，请稍后重试！',
                    // })
                })
            } else {
                // console.log('error submit!')
                ElMessage({
                    message: fields[Object.keys(fields)[0]][0].message,
                    type: 'warning',
                })
            }
        })
    }

    
</script>
  
<style lang="scss" scoped>
    .edit-form-item {
        @include edit-form-item;
        .form-item-width-1 {
            @include form-item-width-1;
        }
    }
</style>
